<!-- /*********************************************************
 * @file      admin.html
 * @author    mCube
 * @brief     ESP32 web UI
 * @version   1.0.0
 * @date      2021-07-01
 * @changelog (2021-07-15) add client token section
 *                         reorganised UI
 *
 * @copyright Copyright (c) 2021 mCube, Inc.  All rights reserved.
 *
 *  This source is subject to the mCube Software License.
 *  This software is protected by Copyright and the information and source code
 *  contained herein is confidential. The software including the source code
 *  may not be copied and the information contained herein may not be used or
 *  disclosed except with the written permission of mCube Inc.
 *  All other rights reserved.
**********************************************************/ -->

<html>

<head>
    <link rel="stylesheet" href="css/style.css">
    <style type="text/css">
        <!--
        * { font-size:16px}
        body { margin:0}
        .line { position:relative; float:left; padding:8px 0}
        .line span { float:left}
        input { border:1px solid #888; vertical-align:middle}
        .file { position:absolute; left:90px; top:8px; display:none;filter:alpha(opacity=0);opacity:0}
        .file1 { padding:2px 10px; display:block; float:left; background:#efefef; color:#111111; height: 30px;line-height: 30px; z-index:1; margin-left:5px; vertical-align:middle; cursor: pointer}
        .inputstyle { width:150px; border:1px solid #888; z-index:99}
        -->
    </style>
</head>

<body>
    <title>Movella IAM Gateway Dashboard</title>
    <nav class="nav" tabindex="-1" onclick="this.focus()">
        <div class="container">
            <a class="pagename current" href="https://movella.com/">Movella IAM Solutions</a>
        </div>
    </nav>
    <div class="container">
        <h1>Gateway Dashboard</h1>
        <div class="hero">
            <h3>Device Information</h3>
            <p id="gw_mac"></p>
            <p id="gw_version"></p>
            <p id="gw_ip"></p>
        </div>
        <div class="row form">
            <div class="col c4">
                <div>
                    <h2>Gateway Network</h2>
                    <div class="form-control">
                        <label for="ssid" class="form-ori">Wi-Fi Name:</label>
                        <input type="text" class="smooth" id="ssid" name="ssid" placeholder="Type WiFi network...">
                    </div>
                    <div class="form-control">
                        <label for="pass" class="form-ori">Wi-Fi Password:</label>
                        <input type="text" class="smooth" id="pass" name="pass" placeholder="Type WiFi password...">
                    </div>
                    <div class="form-control"><button href="#" class="btn btn-sm btn-c" id="wifisave">Save Network Settings</button></div>
                </div>
                <hr>
                <div>
                    <h2>IAM Cloud</h2>
                    <div class="form-control">
                        <label for="server" class="form-ori">Server Address:</label>
                        <input type="text" class="smooth" id="server" name="server" placeholder="ws://[domain]:[port]/">
                    </div>
                    <div class="form-control">
                        <label for="clientToken" class="form-ori">Client Token:</label>
                        <input type="text" class="smooth" id="clientToken" name="clientToken" placeholder="Type client token...">
                    </div>
                    <div class="form-control"><button href="#" class="btn btn-sm btn-c" id="wsSave">Save IAM Cloud Settings</button></div>
                </div>
                <hr>
                <div>
                    <h2>BLE Setting</h2>
                    <div class="form-control">
                        <label for="ble_name" class="form-ori">BLE Name:</label>
                        <input type="text" class="smooth" id="ble_name" name="ble_name" placeholder="Type BLE Name...">
                        <label for="ble_conn" class="form-ori">Max Connection:</label>
                        <input type="number" class="smooth" id="ble_max_conn" name="ble_max_conn" placeholder="Type Max Connection..." min="0" max="8">
                    </div>
                    <div class="form-control"><button href="#" class="btn btn-sm btn-c" id="bleSave">Save BLE setting</button></div>
                </div>
                <hr>
                <div>
                    <h2>Run Mode</h2>
                    <div class="form-control">
                        <input type="checkbox" value="" id="enable_log"/> Enable Detail Log<br/><p>
                        <input type="checkbox" value="" id="enable_base64"/> Enable Base64<br/>
                    </div>
                    <div class="form-control"><button href="#" class="btn btn-sm btn-c" id="rmSave">Save Run Mode</button></div>
                </div>
                <!--
                <hr>
                <div>
                    <h2>Version Updata</h2>
                    <form enctype="multipart/form-data" action="/upload" method="post">
                        <input type="file" name="uploadfile" accept=".zip">
                        <input type="submit" value="Upload"    href="#" class="btn btn-sm btn-c">
                     </form>
                </div>
                <hr>
                -->

                <div>
                    <h2>Version Updata</h2>
                    <form enctype="multipart/form-data" action="/upload" method="post">
                        
                        <div class="line">
                            <span>
                                <input name="" type="text" id="viewfile" placeholder="select file" class="inputstyle" />
                            </span>
                            <label  onmouseover="document.getElementById('upload').style.display='block';" class="file1">brower...</label>
                            <input type="file" name="uploadfile" accept=".zip" onchange="document.getElementById('viewfile').value=this.value;" class="file" id="upload" />
                        </div>
                        <div style="display: block;clear: both">
                            <input type="button" value="Upload"   id="otaButton"  href="#" class="btn btn-sm btn-c">
                         </div>
                     </form>
                </div>
                <hr>

                
            </div>


        </div>
    </div>

    
    <script src="js/coco-message.min.js"></script>
    <script src="js/index.js"></script>

    <script>
       

     </script>

</body>

</html>
